<template>
	<el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" @keyup.enter="onLogin">
		<div class="login-title">系统登陆</div>
    <div class="login-body">
      <el-form-item label="用户名"></el-form-item>
      <el-form-item prop="username">
        <el-input class="login-input" v-model="loginForm.username" :placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="密码"></el-form-item>
      <el-form-item prop="password">
        <el-input class="login-input" v-model="loginForm.password" show-password :placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item class="login-button">
        <el-button class="login-button" type="primary" @click="onSubmit()">登录</el-button>
      </el-form-item>
    </div>
	</el-form>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { useRouter } from "vue-router"
import service from '@/utils/request'
import { setToken, setUserInfo, setUserRole } from '@/utils/cache'

const router = useRouter();
// do not use same name with ref
const loginForm = reactive({
  username: 'test',
  password: '123456'
})

const onSubmit = () => {
  service.post("/api/user/login", loginForm).then(res=>{
    if(res.code==0){
      setUserInfo(res.data.userInfo);
      setToken(res.data.userInfo.token);
      setUserRole(res.data.roles);
      router.replace("/")
    }
  })
}
</script>

<style scoped >
.login-title {
	display: flex;
	justify-content: center;
  padding:50px;
	font-size: 24px;
	color: #ffffff;
	letter-spacing: 4px;
  background:#409eff;
}
.login-body{
  padding:30px;
}
.login-input{
  font-size:24px;
  height:39px;
}
.login-button {
  width:100%;
  font-size:20px;
  height:39px;
}
</style>


